<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>自定义指令</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="" rel="stylesheet" />
</head>

<body>
    <!-- 
        自定义指令：自己定义的指令即为自定义指令
        什么时候需要开发者自己定义指令？
        注意点：
            a. 自定义指令也是指令，必须遵循指令的定义；（以“v-开头”）
            b. 自定义指令分为两类：全局自定义指令、局部自定义指令。
                全局自定义指令：适用于整个应用
                局部自定义指令：只适用于当前页面/组件
                但是，基于现状（现状是：现在写法都是基于“.html”文件的写法），可能在学习的时候觉得全局与局部无差别。在以后的情况（将来不会以“.html”文件来写vue项目，而是以工程化的方式来写vue项目，特点是文件以“.vue”作为后缀）下，是存在明显的差异的。
            c. 语法：
                    全局语法：Vue.directive(指令名,{function...})
                    局部语法：new Vue({
                        el: ....,
                        data:....,
                        methods: {....},
                        directives: {
                            指令名1: callback,
                            指令名2: callback,
                            ....
                        }
                    })
            d. 关于自定义指令的里面的函数的问题：
                1. 函数名的命名不能为所欲为，名称一般是固定的几个
                2. 具体的函数名有以下几个：
                    bind：表示指令第一次绑定到元素的时候
                    inserted：表示指令依附的元素插入父节点的时候
                    update：表示相应的数据更新的时候
                    componentUpdated：表示数据更新完毕的时候
                    unbind：表示解除绑定的时候
                3. 其中，bind和inserted初学者往往容易搞混，在执行的时候bind先执行，后才执行inserted。在bind方法中是无法获取到父节点的，在inserted方法中是可以获取到父节点的。
                4. 所有的函数都有俩个形参：el、binding
                    el：指定依附的元素的dom对象
                    binding：绑定到指令上的相关信息（可选）
            e. 上述提及的指令名称均不带“v-”前缀；
     -->
    <!-- 
        案例：使用自定义指令实现以下效果
        - 使用全局指令定义自定义的`v-red（不传参）`和`v-color（传参）`，在元素被插入时设置内容颜色【通过自定义指令来控制文字的颜色】
        - 使用局部自定义指令实现`v-mobile（不传参）`验证用户输入的是否是合法的手机号，不合法手机号为红色，合法为黑色 【表单的验证】

        请注意：当前是基于html形式的文件
    -->
    <div id="app">
        <div>
            <!-- 指令v-red，实现将文字的颜色设置成红色 -->
            <div v-red>武汉上演建党百年长江灯光秀</div>
            <!-- 指令v-color：实现将文字的颜色设置成指定的颜色 -->
            <div v-color="'blue'">将延长边境防疫管控1年?中方回应</div>
        </div>
        <div>
            <!-- 指令v-mobile：需要验证用户输入的手机号是否合法 -->
            <input type="text" v-model="mobile" v-mobile />
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 全局自定义指令
        Vue.directive("red", {
            // bind: function(el){
            //     // el是指令绑定的dom对象
            //     console.log(el);
            //     // 获取父节点，当然当前bind的时候是获取不到的，因此为null
            //     console.log(el.parentNode);
            // },
            inserted: function (el) {
                // el表示dom对象
                console.log(el);
                // el.parentNode表示其父节点
                console.log(el.parentNode);
                // 通过dom对象，设置颜色
                el.style.color = 'red'
            }
        });
        Vue.directive("color", {
            inserted: function (el, binding) {
                console.log(el, binding);
                // binding.value表示属性的值（该值不是看到的表达式，而是解析完后的值）
                el.style.color = binding.value
            }
        })
        new Vue({
            el: "#app",
            data: {
                mobile: ""
            },
            // 自定义指令：
            directives: {
                mobile: {
                    // 定义需要使用的函数
                    update: function (el) {
                        // console.log(el);
                        // 获取手机号
                        let mobile = el.value
                        // 正则表达式验证手机号是否合法
                        if (/^1[3-9]\d{9}$/.test(mobile)) {
                            el.style.color = "black"
                        } else {
                            el.style.color = "red"
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>